import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import '/pages/tabs/home.dart';
import '/pages/tabs/category.dart';
import '/pages/tabs/message.dart';
import '/pages/tabs/settings.dart';
import '/pages/tabs/user.dart';

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 2;
  final List<Widget> _pages = const [
    HomePage(),
    CategoryPage(),
    MessagePage(),
    SettingsPage(),
    UserPage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter App"),
      ),
      //左侧菜单栏
      drawer: const Drawer(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  flex: 1,
                  //自定义Drawer头部
                  child: DrawerHeader(
                    decoration: BoxDecoration(
                        color: Colors.yellow,
                        image: DecorationImage(
                            image: NetworkImage(
                                "https://www.itying.com/images/flutter/2.png"),
                            fit: BoxFit.cover)),
                    child: Column(
                      children: [
                        ListTile(
                          leading: CircleAvatar(
                            backgroundImage: NetworkImage(
                                "https://www.itying.com/images/flutter/3.png"),
                          ),
                          title: Text("张三"),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
            //配置抽屉组件头部
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
              title: Text("个人中心"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              title: Text("系统设置"),
            ),
            Divider(),
          ],
        ),
      ),
      endDrawer:const Drawer(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  flex: 1,
                  //UserAccountsDrawerHeader 封装好的drawer头部
                  child: UserAccountsDrawerHeader(
                    accountName: Text("李四"),        // 用户名称
                    accountEmail: Text("lisi@163.com"), //用户邮箱
                    currentAccountPicture: CircleAvatar(  //用户头像
                      backgroundImage: NetworkImage("https://www.itying.com/images/flutter/5.png"),
                    ),
                    //其他图片
                    otherAccountsPictures: [
                      Image(image: NetworkImage("https://www.itying.com/images/flutter/1.png")),
                      Image(image: NetworkImage("https://www.itying.com/images/flutter/2.png")),
                      Image(image: NetworkImage("https://www.itying.com/images/flutter/3.png")),
                    ],
                    currentAccountPictureSize: Size.fromRadius(36),
                    decoration: BoxDecoration(    //背景图片
                      image: DecorationImage(
                          fit: BoxFit.cover,
                          image: NetworkImage("https://www.itying.com/images/flutter/4.png")
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      body: _pages[_currentIndex],
      //App底部tab
      bottomNavigationBar: BottomNavigationBar(
        iconSize: 32,
        //设置底部tab的图标大小
        fixedColor: Colors.red,
        //设置选中颜色
        currentIndex: _currentIndex,
        //设置选中的tab
        type: BottomNavigationBarType.fixed,
        //如果底部有4个或4个以上菜单时,需要配置此项
        //监听点击选中的bar
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "用户"),
        ],
      ),
      //配置浮动按钮
      floatingActionButton: Container(
        height: 60,
        width: 60,
        padding: const EdgeInsets.all(5),
        margin: const EdgeInsets.only(top: 20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
        ),
        child: FloatingActionButton(
          backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
          onPressed: () {
            setState(() {
              _currentIndex = 2;
            });
          },
          child: const Icon(Icons.add),
        ),
      ),
      //配置浮动按钮位置 底部居中
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}
